<div class="d-flex justify-content-between">
  <h3 class="primary-text m-0">{{ 'support.title' | translate }}</h3>
</div>

<div class="mb-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.general ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsGeneral'"
    (click)="toggleSection('general')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.general, 'fa-chevron-right' : !showFields.general }"></i>
      {{ 'support.links.title' | translate }}
    </h5>
  </div>
  @if (showFields.general) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsGeneral">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.links.documentation' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.links.documentation_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://github.com/homebridge/homebridge/wiki"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.links.documentation' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.links.issue' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.links.issue_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://github.com/homebridge/homebridge-config-ui-x/issues/new/choose"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.links.issue' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.links.discord' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.links.discord_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://discord.gg/C87Pvq3"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.links.discord' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.links.reddit' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.links.reddit_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://www.reddit.com/r/homebridge/"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.links.reddit' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
  </ul>
  }
</div>
<div class="pb-3">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.dev ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsDev'"
    (click)="toggleSection('dev')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.dev, 'fa-chevron-right' : !showFields.dev }"></i>
      {{ 'support.dev.title' | translate }}
    </h5>
  </div>
  @if (showFields.dev) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsDev">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.dev.item_swagger' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.dev.item_swagger_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        [href]="swaggerUrl"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.dev.item_swagger' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.dev.api' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.dev.api_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://developers.homebridge.io/#/"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.dev.api' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.dev.api_hap' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.dev.api_hap_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://developers.homebridge.io/HAP-NodeJS/"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.dev.api_hap' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.dev.template' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.dev.template_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://github.com/homebridge/homebridge-plugin-template"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.dev.template' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'support.dev.verified' | translate }}<br />
        <small class="grey-text pe-2">{{ 'support.dev.verified_sub' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0"
        href="https://github.com/homebridge/homebridge/wiki/Verified-Plugins"
        target="_blank"
        rel="noopener noreferrer"
        style="min-width: 50px"
        [attr.aria-label]="'support.dev.verified' | translate"
      >
        <i class="fas fa-external-link-alt"></i>
      </a>
    </li>
  </ul>
  }
</div>
